<template>
  <a-drawer
    v-model:open="drawerVisible"
    width="50%"
    placement="right"
    title="Student详情"
    :closable="true"
    @close="closeDrawer"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Id">
            {{ itemDetail.id }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="StudentNo">
            {{ itemDetail.studentNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Name">
            {{ itemDetail.name }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Gender">
            {{ getGenderText(itemDetail.gender) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Age">
            {{ itemDetail.age }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="BirthDate">
            {{ itemDetail.birthDate }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="ClassName">
            {{ itemDetail.className }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="EnrollDate">
            {{ itemDetail.enrollDate }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Status">
            {{ getStatusText(itemDetail.status) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Remark">
            {{ itemDetail.remark }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="CreatedAt">
            {{ itemDetail.createdAt }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="UpdatedAt">
            {{ itemDetail.updatedAt }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Student } from "./Student";

const drawerVisible = ref(false);
const itemDetail = ref<Partial<Student>>({});
const getGenderText = (value: string | undefined): string => {
  if (!value) return '';
  const texts: Record<string, string> = {
    '1': '男',
    '2': '女',
  };
  return texts[value] || value;
};
const getStatusText = (value: string | undefined): string => {
  if (!value) return '';
  const texts: Record<string, string> = {
    '1': '在读',
    '2': '毕业',
    '3': '休学',
    '4': '退学',
  };
  return texts[value] || value;
};

function openDrawer(item: Student) {
  itemDetail.value = { ...item };
  drawerVisible.value = true;
}

function closeDrawer() {
  drawerVisible.value = false;
  itemDetail.value = {};
}

defineExpose({ openDrawer });
</script>

<style scoped>
.ant-descriptions {
  margin-bottom: 20px;
}
</style>